var panel = {
  timer: null,
  visible: false,
  index: 0,
  show: function () {
    video.hideControls()
    clearTimeout(this.timer);
    this.timer = null;
    var _this = this;
    _this.visible = true
    $('#my-play-list').css({
      'right': 20
    });
    this.timer = setTimeout(function () {
      clearTimeout(_this.timer);
      _this.timer = null;
      _this.hide();
    }, 5000)
  },
  hide: function () {
    var index = video.index;
    clearTimeout(this.timer);
    this.timer = null;
    $('#my-play-list').css({
      right: -$('#my-play-list').width()
    })
    this.visible = false
    this.index = index
    utils.toggleClass($('#panel-' + index)[0])
    this.conputeScroll()
    video.showControls()
  },
  init: function () {
    this.render();
    this.conputeScroll();
    this.onFocus();
    this.show();
  },
  render: function () {
    var html = ''
    var data = page.data.playList
    var program = page.data.program
    for (var i = 0; i < data.length; i++) {
      var chargeHtml = ''
      var className = ''
      if (program.charge != 0 && data[i].charge == 0 && page.isSub != 0) {
        chargeHtml = '<span class="charge">免费</span>'
      }
      if (i == this.index) {
        className = 'focus'
      }
      html += '<div class="item table ' + className + '" id="panel-' + i + '">' +
        '<div class="cell">' +
        '<div class="text"><div class="status"></div>' + chargeHtml + data[i].name + '</div>' +
        '</div>' +
        '</div>'
    }
    $('#panel-container').html(html);
  },

  conputeScroll: function () {
    var index = this.index
    var len = page.data.playList.length;
    var _diff = 6;
    if (len < _diff) return;
    var ave = Math.floor(_diff / 2);
    var height = 100;
    if (index < ave) {
      $('#panel-container').css('top', 0);
    } else if (index > (len - ave)) {
      $('#panel-container').css('top', -(len - _diff) * height)
    } else {
      $('#panel-container').css('top', -(index - ave) * height)
    }
  },
  onFocus: function () {
    $('#panel-container .item').eq(this.index).addClass('played').siblings('.item').removeClass('played');
    this.conputeScroll(this.index)
  },
}
